<template>
    <!-- 文章组 -->
    <view class="diy-article">
        <view :class="'article-item show-type__' + item.show_type" @tap.stop.prevent="onTargetDetail" :data-id="item.article_id" v-for="(item, index) in dataList" :key="index">
            <!-- 小图模式 -->

            <block v-if="item.show_type == 10">
                <view class="article-item__left flex-box">
                    <view class="article-item__title twolist-hidden">
                        <text class="f-30 col-3">{{ item.article_title }}</text>
                    </view>
                    <view class="article-item__footer m-top10">
                        <text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
                    </view>
                </view>
                <view class="article-item__image">
                    <image class="image" mode="widthFix" :src="item.image.file_path"></image>
                </view>
            </block>

            <!-- 大图模式 -->

            <block v-if="item.show_type == 20">
                <view class="article-item__title">
                    <text class="f-30 col-3">{{ item.article_title }}</text>
                </view>
                <view class="article-item__image m-top20">
                    <image class="image" mode="widthFix" :src="item.image.file_path"></image>
                </view>
                <view class="article-item__footer m-top10">
                    <text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {};
    },
    options: {
        addGlobalClass: true
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    props: {
        itemIndex: String,
        // itemStyle: Object,
        params: Object,
        dataList: Array
    },
    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        /**
         * 跳转文章详情页
         */
        onTargetDetail(e) {
            uni.navigateTo({
                url: '/pages/article/detail/index?article_id=' + e.currentTarget.dataset.id
            });
        }
    }
};
</script>
<style lang="scss">
/* common.wxss */
/* @import "../../../utils/common.scss"; */

/* 文章组 */

.diy-article {
    background: $uni-bg-color-grey;
}

.diy-article .article-item {
    margin-bottom: 20rpx;
    padding: 30rpx;
    background: #fff;
}

.diy-article .article-item:last-child {
    margin-bottom: 0;
}

.diy-article .article-item .article-item__image .image {
    display: block;
}

/* 小图模式 */

.show-type__10 {
    display: flex;
}

.show-type__10 .article-item__left {
    padding-right: 20rpx;
}

.show-type__10 .article-item__title {
    min-height: 72rpx;
}

.show-type__10 .article-item__image .image {
    width: 240rpx;
}

/* 大图模式 */

.show-type__20 .article-item__image .image {
    width: 100%;
}
</style>
